<template>
    <div class="sys-notices">
        <div class="list" :class="{'min-h-loading':loading}" v-loading="loading">
            <div class="list-item d-flex" v-for="n in notices" :key="n.id" @click="showNotice(n)">
                <div class="title">{{ formatDate(n.createTime,'yyyy-mm-dd') }}</div>
                <div class="fill-flex">{{ n.title }}</div>
                <div>
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div v-if="loading == false && notices.length == 0" class="text-center">
                <div class="info-text">暂无通知</div>
            </div>
        </div>
        <div class="text-center">
            <el-pagination style="margin-top: 10px" hide-on-single-page
                           small prev-text="上一页" next-text="下一页"
                           layout="prev, next" :page-size="params.page_size"
                           :current-page="params.page_no"
                           @change="showPage"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from "@/services/api";
import StringTool from "@/util/StringTool";

export default {
    name:'SysNotice',
    data(){
        return {
            loading:false,
            notices:[],
            total:0,
            params:{
                page_no:1,
                page_size:5
            }
        }
    },
    mounted() {
        this.loadList();
    },
    methods: {
        ...StringTool,
        showPage(page){
            this.params.page_no = page;
            this.loadList();
        },
        loadList(){
            this.loading = true;
            api.get("/notice/list",this.params).then(data=>{
                this.notices = data.records
                this.total = data.total
            }).catch().finally(()=> {
                this.loading = false
            });
        },
        showNotice(notice) {
            this.$alert(notice.message, notice.title, {
                dangerouslyUseHTMLString: true,
                customClass: 'notice-dialog'
            });
        }
    }
}
</script>
